<template>
    <view class="menus">
          
                <view class="menus-col">
                  
                    
                            <view v-for="(col,index) in  menus" :key="index" class="menus-item"  @tap="toSearch(col)">
                                <image v-if="col.wapBannerUrl || col.iconUrl"  mode="scaleToFill" :src="col.wapBannerUrl || col.iconUrl " />
                                <image v-else src="/static/images/blank.png" mode="scaleToFill"/>
                                <text>{{col.frontName || col.categoryName }}</text>
                            </view>
                      
                </view>  
                
    </view>
</template>
<script lang="ts">

  import {Vue, Component ,Prop } from 'vue-property-decorator';

   @Component({}) 
   export default  class extends Vue {
            @Prop({type:Array}) menus!:Array<any>;

            toSearch(d:any){

                    let {categoryName} = d;
                    uni.navigateTo({
                        url:`/pages/search/index?categoryName=${categoryName}`
                    })
     
            }
            
          
            
    }

    

</script>
<style lang="scss">
    .menus{
        font-size: 0px;
        padding:50rpx 20rpx 45rpx;
        position: relative;
        z-index: 2;
        margin-bottom: 20rpx;
        background: #fff;
        border-radius:20rpx;
        box-sizing: border-box;
        &-col{
        
            width: 100%;
           
         
        }
        &-item{
            width:20%;
            display: inline-block;
           
            text-align: center;
            vertical-align: top;
            margin-bottom: 36rpx;
           
            &:nth-child(n+6){
                margin-bottom: 0rpx;
                image{
                   width: 56rpx;
                   height: 56rpx; 
                   margin-bottom: 6rpx;
                }
                // margin-top: 30rpx;
                // margin-bottom: 10rpx;
            }

        }
        image{
            width:98rpx;
            height:98rpx;
            margin-bottom:10rpx;
            border-radius: 50rpx;
            
        } 
        text{
            font-size: 25rpx;
            display: block;
            width: 100%;
            line-height: 40rpx;
            color:#333;
            font-weight: 400;
        }   
    }

</style>